<template>
  <div class="order-detail">

    <table-cmp
      :query="query"
      :form-content="searchBody"
      :btn-content="btnBody"
      :loading="loading"
      @loadData="loadData"
      @btn-click="handleBtn"
      @select-change="handleSelectionChange"
    >

      <el-table-column label="ip" min-width="150px" header-align="center" align="center" fixed>
        <template slot-scope="scope">{{ scope.row.ip }}</template>
      </el-table-column>
      <el-table-column label="mask" min-width="150px" header-align="center" align="center">
        <template slot-scope="scope">{{ scope.row.mask }}</template>
      </el-table-column>
      <!-- <el-table-column label="操作人" min-width="150px" header-align="center" align="center">
        <template slot-scope="scope">{{ scope.row.realName }}</template>
      </el-table-column> -->
      <!-- <el-table-column label="操作" min-width="150px" header-align="center" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleSee(row,3)">解封</el-button>
          <el-button type="primary" size="mini" @click="handleSee(row,3)">验证</el-button>
        </template>
      </el-table-column> -->
    </table-cmp>
    <el-dialog
      :title="dialogType==='undo' ? '筛查' :dialogType==='addDo' ? '添加' :dialogType==='yanzheng' ? '筛查': '' "
      :visible.sync="dialogFormVisible" :show-close="false">
    <!-- <UnDoForm @close="unDoFormClose" v-show="dialogType==='undo'"></UnDoForm> -->
    <AddDoForm @close="unDoFormClose" v-show="dialogType==='addDo'"></AddDoForm>
    <YZForm @close="unDoFormClose" v-show="dialogType==='yanzheng'"></YZForm>
    </el-dialog>
  </div>
</template>
<script>
import DescriptionList from "@/components/DescCmp"; // 引入组件
import { MIX_Table } from "@/mixin/table";
import { fetchDisplayList } from "@/api/black";
import  UnDoForm  from './components/undo.vue'
import  AddDoForm  from './components/addDo.vue'
import  YZForm  from './components/yanzheng.vue'
export default {
  name: "",
  components: { DescriptionList , UnDoForm ,AddDoForm,YZForm},
  // props: ["orderId"],
  data() {
    return {
      dialogType:'',
      // dloading: false,
      orderId: "8633e83f-c36b-4cdd-8b4a-753af2abfb08",
      user: null,     // 客服详情
      productId: "",
      showProductDetail: false,
      orderHistoryData: {},   //订单历史
      dialogFormVisible :false,
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      searchCfg:{
        queryPar:[
          {
            fieldName: 'module', // 字段
            defaultValue: '请输入ip', // 输入框提示
            conditionType: 1, // 输入框类型
            itemWidth: 100, // 输入框宽度
            url: '',
            dataSource: '', // 选项[]
            displayName: '', // label显示
            dataSourceType: 1
          }
        ],
        menuOper:[
          {
            id: 0,
            actionText: "重置",
            actionType: 2,
            remark: "reset",
            class:""
          },
          // {
          //   id: 1,
          //   actionText: "筛查",
          //   actionType: 2,
          //   remark: "fengdu-jiefeng",
          //   class:"warning"
          // },
          {
            id: 2,
            actionText: "添加",
            actionType: 2,
            remark: "fengdu-fengdu",
            class:"primary"
          },
          {
            id: 3,
            actionText: "筛查",
            actionType: 2,
            remark: "fengdu-yz",
            class:"danger"
          },

        ]
      },
      // form: {
      //   ips:'',
      //   instance:'',
      //   mask:'',
      //   route:'',
      //   describe:''
      //   },
    //  formLabelWidth: '120px',
    //  rules: {
    //       ips: [
    //             { required: true, message: '请输入ips', trigger: 'blur' },

    //           ],
    //       instance: [
    //         { required: true, message: '请输入instance', trigger: 'blur' }
    //       ],
    //       mask: [
    //         { required: true, message: '请输入mask', trigger: 'blur' }
    //       ],
    //       route: [
    //         {required: true, message: '请输入route', trigger: 'blur' }
    //       ],
    //       describe: [
    //         { required: true, message: '请输入describe', trigger: 'blur' }
    //       ]
    //     }
    };
  },
  mixins: [MIX_Table],
  methods: {
    // ------------------------------------------------------------------
    // pragma mark - inti(初始化行为)
    // ------------------------------------------------------------------
    createdInit() {
      // this.query.pageInfo.PhoneNumber = this.$route.query.PhoneNumber;
      this.loadData();
      // this.loadTableData(fetchDisplayList);
    //   if (this.$route.query.orderId) {
    //     this.orderId = this.$route.query.orderId;
    //     this.loadOrderData();
    //     this.loadOrderHistoryData();
    //   }
        // this.loadOrderData();
        // this.loadOrderHistoryData();
    },
    mountedInit() {
      // if (this.$route.query.PhoneNumber) {
      //   this.order = this.query;
      //   console.log(this.order);
      //   console.log(this.order.data);

      // }
    },
    // 加载操作日志表格
    loadData() {
      this.loadTableData(fetchDisplayList);
    },

    handleSelectionChange(val) {
      this.multiple = val;
    },
    handleBtn(val) {
    console.log('val: ', val);
      if (val === "fengdu-jiefeng") {
      console.log('val+: ', val);
      this.dialogType='undo'
      this.dialogFormVisible=true
      }else if(val==='fengdu-fengdu'){
        this.dialogType='addDo'
        this.dialogFormVisible=true
      }else if(val==='fengdu-yz'){
        this.dialogType='yanzheng'
        this.dialogFormVisible=true
      }else if(val==='reset'){
        this.query.pageInfo.page=1
       if(this.query&&this.query.module){
       this.query.module=""
       this.loadData();
       }
      }
    },
    // cancel(){
    //   this.$refs['ruleForm'].resetFields();
    //   this.dialogFormVisible=false
    // },
    // submitForm(formName) {
    //     this.$refs[formName].validate(async (valid) => {
    //       if (valid) {
    //      this.dloading=true
    //       console.log('valid: ', valid);
    //       let form =this.form
    //       console.log('form: ', form);
    //       let res = await undo(form)
    //       if(res.code===1){
    //         this.$message.success('操作成功')
    //         this.dialogFormVisible=false
    //       }
    //       this.dloading=false
    //       console.log('解封res: ', res);
    //         // alert('submit!');
    //       } else {
    //         this.dloading=false
    //         console.log('error submit!!');
    //         return false;
    //       }
    //     });
    // },
    // loadOrderData() {
    //   console.log("订单详情");
    //   fetchOrder(this.orderId).then(res => {
    //     if (res.success) {
    //       this.order = res.data;
    //       console.log(this.order);
    //     }
    //   });
    // },
    // loadOrderHistoryData() {
    //   historyOrder(this.orderId).then(res => {
    //     if (res.success) {
    //       this.orderHistoryData = res.data || [];
    //       console.log(this.orderHistoryData);
    //     }
    //   });
    // },
    // 查看商品详情
    // handleSeeProduct(val) {
    //   console.log(val);
    //   this.productId = val.productId;
    //   this.showProductDetail = true;
    // }
    unDoFormClose(bool){
      if(bool){this.loadData()}
      this.dialogFormVisible=false
    }
  },
  // ------------------------------------------------------------------
  // pragma mark - Life Cycle(生命周期)
  // ------------------------------------------------------------------
  created() {
    this.createdInit();
  },
  beforeMount() {},
  mounted() {
    this.mountedInit();
  },
  updated(){

  }
};
</script>
<style scoped>
.order-detail {
  padding: 20px 20px;
}
</style>
